<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>svg链表可视化</title>
    <style>
        div {
            display: inline-block;
            height: 20px;
            border: 1px solid #000;
            cursor: pointer;
        }

        circle {
            stroke-width: 3px;
            stroke: #000;
            fill: #fff;
        }

        line {
            stroke-width: 2px;
            stroke: #000;
        }
    </style>
    <script src="JS/headaddnode.js"></script>
    <script src="JS/tailaddnode.js"></script>
    <script src="JS/appointaddnode.js"></script>
</head>

<body>
    <div class="creat">随机创建</div>
    <div class="clear">清空</div>
    <div class="headadd">头部添加</div>
    <div class="tailadd">尾部添加</div>
    <div class="appointadd">指定位置添加</div>
    <div class="search">搜索</div>


    <svg width="100%" height="100%">
        <defs>
            <g id="nodecircle">
                <circle cx="200" cy="50" r="25"></circle>
            </g>
            <text x="192 " y="55"></text>
        </defs>
        <defs>
            <g id="line">
                <line x1="200" y1="50" x2="225" y2="50"></line>
                <line x1="225" y1="50" x2="215" y2="40"></line>
                <line x1="225" y1="50" x2="215" y2="60"></line>
            </g>
        </defs>
        <use href="#nodecircle" x="0" y="0" class="showcircle"></use>
        <use href="#line" x="25" y="0" class="showarrow"></use>

    </svg>
    <script>
        let svg = document.querySelector('svg');
        let creat = document.querySelector('.creat');
        let clear = document.querySelector('.clear');
        let headadd = document.querySelector('.headadd');

        let tailadd = document.querySelector('.tailadd');
        let appointadd = document.querySelector('.appointadd');

        let tail = document.querySelector('.tail');
        let search = document.querySelector('.search');
        let putnum = document.getElementById('putnum');


        let cx1 = 200;

        let nodecircle = document.querySelectorAll('#nodecircle');
        let arrow = document.querySelectorAll('#line');
        let text = document.querySelector('text');

        let r = 25;
        text.innerHTML = Math.ceil(Math.random() * 100);

        // 复刻链表节点，文本和箭头
        let defs1 = svg.children[0].cloneNode(true);
        let defs2 = svg.children[1].cloneNode(true);
        let node = svg.children[2].cloneNode(true);
        let line = svg.children[3].cloneNode(true);
        let showtext = defs1.children[1].cloneNode(true);
        svg.appendChild(showtext);

        // 初始随机链表
        random();


        //随机创建按钮
        creat.addEventListener('click', function () {
            // 清空画布
            svg.innerHTML = '';
            node.setAttribute('x', 0);
            line.setAttribute('x', 25);
            showtext.setAttribute('x', 192);
            showtext.innerHTML = Math.ceil(Math.random() * 100);
            svg.appendChild(defs1);
            svg.appendChild(defs2);
            svg.appendChild(node);
            svg.appendChild(line);
            svg.appendChild(showtext);

            //随机创建
            random();
        });

        //清空按钮
        clear.addEventListener('click', function () {
            // 清空画布
            svg.innerHTML = '';

        });


        //随机创建
        function random() {
            // 每次随机创建都是从x坐标为200处开始
            let cx1 = 25;
            let cx2 = 192;
            //链表节点为random+1个
            let random = Math.ceil(Math.random() * 10);
            // 链表节点不能为0个，所以用了一个判断
            random != 0 ? random : Math.ceil(Math.random() * 10);
            for (let i = 1; i <= random; i++) {

                cx1 += 2 * r;
                cx2 += 3 * r;

                let node = svg.children[2].cloneNode(true);
                node.setAttribute('x', cx1);
                svg.appendChild(node);
                cx1 += 1 * r;


                let showtext = defs1.children[1].cloneNode(true);
                showtext.setAttribute('x', cx2);
                showtext.innerHTML = Math.ceil(Math.random() * 100);
                svg.appendChild(showtext);


                // 最后一个链表节点不需要箭头
                if (i != random) {
                    let arrowch = svg.children[3].cloneNode(true);
                    arrowch.setAttribute('x', cx1);
                    svg.appendChild(arrowch);
                }
            }
        }

        //搜索
        search.addEventListener('click', function () {
            let putnum = prompt('请输入你要搜索的节点的号数');
            let flag = 0;
            //let showtext = defs1.children[1].cloneNode(true)；
            let textlist = document.getElementsByTagName('text');
            for (let index = 1; index < textlist.length; index++) {
                let circle = document.getElementById('round');
                // let inputnum = putnum.value;
                let textinner = textlist[index].innerHTML;
                while (textinner == putnum) {
                    alert('在第' + index + '个');
                    flag = 1;
                    break;
                }
                // if (flag == 1) {
                //     break;
                // }

            }
            if (flag == 0) {
                alert('没有你所想要找的节点哦！');
            }
        })


        //头部添加
        headadd.addEventListener('click', function () {
            headaddnode();
        })

        //尾部添加
        tailadd.addEventListener('click', function () {
            tailaddnode();
        })

        //指定位置添加
        appointadd.addEventListener('click', function () {
            appointaddnode();
        })
    </script>
</body>

</html>